<template>
    <div class="goods-info" v-if="Object.keys(goodsInfo).length !== 0">
        <div class="info-desc clear-fix">
            <div class="start"></div>
            <div class="desc">{{goodsInfo.desc}}</div>
            <div class="end"></div>
        </div>
        <!-- 图片展示 -->
        <div v-for="(item,index) in goodsInfo.detailImage" :key="index" >
            <div class="info-key">{{item.key}}</div>
            <div class="list-image">
                <img v-for="imagesrc in item.list" :src="imagesrc" alt="" @load="imageLoadOk">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'DetailGoodsInfo',
        data(){
            return {
                counts:0,    //与图片数量相等就可以发送请求刷新
                imageLength:0,   //图片数量
            }
        },
        props:{
            goodsInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        methods: {
            // 图片加载完执行方法
            imageLoadOk(){
                //
                console.log('检查是否执行');
                console.log(this.counts);
                // 这个逻辑 不能这么写 要是客户网络不好 少取了几张图片 那滑块就不重新新渲染了？
                if(++this.counts >this.imageLength-4){
                    this.$emit('imageLoadOk');
                     console.log('执行了');
                }
            }
        },
        watch: {  // 监听某个属性的变化
            goodsInfo () {
                this.imageLength = this.goodsInfo.detailImage[0].list.length
            }
        }
    }
</script>
<style scope>
  .image-info {
  padding: 20px 0;
  border-bottom: 5px solid #f2f5f8;
}

  .info-desc {
    padding: 15px;
  }

  .info-desc .start,
  .info-desc .end {
    position: relative;
    width: 90px;
    height: 1px;
    background-color: #a3a3a5;
  }

  .info-desc .start {
    float: left;
  }

  .info-desc .end {
    float: right;
  }

  .info-desc .start::before,
  .info-desc .end::after {
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 5px;
    content: "";
    background-color: #333333;
  }

  .info-desc .end::after {
    right: 0;
  }

  .info-desc .desc {
    font-size: 12px;
    padding: 15px 0;
    color: #666;
  }
  .info-key {
    font-size: 15px;
    margin: 10px 0 10px 15px;
    color: #666;
  }
  .list-image img {
    width: 100%;
  }
</style>